import React, { useState } from 'react'
import { NavLink, Outlet, useNavigationType, useOutlet, useResolvedPath } from 'react-router-dom'

export default function Home() {
  // 判断当前页面是通过 【刷新(POP) 或 push(PUSH) 或 replace(REPLACE)】 进入到该页面的
  console.log('useNavigationType',useNavigationType());

  /** 呈现当前组件中渲染的嵌套路由组件
   * 如果嵌套路由没有挂载，则返回null
   * 如果嵌套路由已经挂载，则展示嵌套的路由对象
   */
  console.log('useOutlet',useOutlet());

  /** 解析路由信息
   * 
   */
  console.log('useResolvedPath',useResolvedPath('/user?id=6&name=对对对#qwe'));

  return (
    <div>
      <h3>我是Home的内容</h3>
      <div>
        <ul className="nav nav-tabs">
          <li>
            {/*  to="/home/news"   可以不带父级路由路径 */}
            <NavLink className="list-group-item" to="news">News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>

        {/* 指定路由的位置 */}
        <Outlet />
      </div>

    </div>
  )
}
